<template>
  <div class="hezuo">
    <div class="hezuo_home_abso" @click="turnToHome">协会<br/>首页</div>
    <div class="hezuo_header">
      <div class="nei_cc">
        <div class="h_title_bg"  v-if="qiyeInfo">{{ qiyeInfo.webtitle }}</div>
        <img src="@assets/img/hezuo/top_pic.png" alt="" />
      </div>
    </div>
    <div class="hezuo_nav">
      <div class="nei_cc">
        <div
          class="nav_li"
          :class="index == hezuoNavSel ? 'active' : ''"
          v-for="(item, index) in hezuoNav"
          :key="index"
          @click="changeNav(index, item)"
        >
          <template v-if="item">
            {{ item.title }}
          </template>
        </div>
      </div>
    </div>
    <div class="hezuo_body">
      <div class="hezuo_img" v-show="hezuoNavSel != 7">
        <img src="@assets/img/hezuo/bannner2.jpg" alt="" />
      </div>
      <HezuoHome
        v-if="hezuoNavSel == 0"
        :qiyeInfo="qiyeInfo"
        :qiyedongtaiList="qiyedongtaiList"
        :qiyeJeshao="qiyeJeshao"
        @changeNav="changeNav"
      >
        <div class="box_title_sy w690" slot="rongyu">
          <div class="box_pt1">
            <div class="b_title">荣誉展示</div>
            <div class="more" @click="changeNav(4)">更多》</div>
          </div>
          <div class="box_pt2">
            <div class="hang_img_text_sy">
              <div
                class="item"
                v-for="(item, index) in rongyuListC"
                :key="index"
                @click.stop="nativeTo(item, 'rongyu')"
              >
                <img
                  :src="httpp + item.thumbnail"
                  alt=""
                  class="zz_img"
                  v-if="item.thumbnail"
                />
                <p class="shengluehao zz_text" v-if="item">{{ item.title }}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="box_title_sy w998" slot="gongcheng">
          <div class="box_pt1">
            <div class="b_title">代表工程</div>
            <div class="more" @click="changeNav(3)">更多》</div>
          </div>
          <div class="box_pt2">
            <div class="hang_img_text_sy">
              <div
                class="item"
                v-for="(item, index) in gongchengListC"
                :key="index"
                @click.stop="nativeTo(item, 'yeji')"
              >
                <img
                  :src="httpp + item.thumbnail"
                  alt=""
                  class="zz_img"
                  v-if="item.thumbnail"
                />
                <p class="shengluehao zz_text" v-if="item">{{ item.title }}</p>
              </div>
            </div>
          </div>
        </div>
      </HezuoHome>
      <HezuoContent
        v-if="hezuoNavSel == 7 && isLogin"
        @changeNav="changeNav"
      ></HezuoContent>
      <div class="qiyejieshao" v-if="hezuoNavSel == 1">
        <div class="content_v1">
          <div class="box_title_sy w998">
            <div class="box_pt1">
              <div class="b_title">企业介绍</div>
              <div class="more_daohang_sy">
                <div class="iconfont icon-youzhijiantou1"></div>
                <div class="">当前的位置 :</div>
                <div class="col_nav" @click="toHome">首页</div>
                <div class="icon">></div>
                <div class="col_nav_c">{{ positionText }}</div>
              </div>
            </div>
            <div class="box_pt2">
              <div class="v_html_img" v-html="qiyeJeshao"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="qiyejieshao" v-show="hezuoNavSel == 2">
        <div class="content_v1">
          <div class="box_title_sy w998">
            <div class="box_pt1">
              <div class="b_title">新闻列表</div>
              <div class="more_daohang_sy">
                <div class="iconfont icon-youzhijiantou1"></div>
                <div class="">当前的位置 :</div>
                <div class="col_nav" @click="toHome">首页</div>
                <div class="icon">></div>
                <div class="col_nav_c">{{ positionText }}</div>
              </div>
            </div>
            <div class="box_pt2" v-show="!isDetail">
              <div
                class="hang_hezuo_sy"
                v-for="(item, index) in qiyedongtaiList"
                :key="index"
                @click.stop="nativeTo(item, 'dongtai')"
              >
                <div class="tab_left shengluehao">
                  <div class="iconfont icon-shuangyoujiantou"></div>
                  <div class="shengluehao" v-if="item">{{ item.title }}</div>
                </div>
                <div class="tab_right">
                  {{ item.time.split(" ")[0] }}
                </div>
              </div>
            </div>
            <div class="detail_content" v-if="isDetail">
              <div class="pt1_t">
                <div class="detail_title" v-if="detailInfo">
                  {{ detailInfo.title }}
                </div>
                <div class="msg_info">
                  <span class="jian">时间 : {{ detailInfo.time }}</span>
                  <span class="jian">来源 : {{ detailInfo.author }}</span>
                  <span class="jian">点击数 : {{ detailInfo.lookcount }}</span>
                </div>
              </div>
              <div
                class="pt2_content v_html_img"
                v-html="detailInfo.content"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="qiyejieshao" v-show="hezuoNavSel == 3">
        <div class="content_v1">
          <div class="box_title_sy w998">
            <div class="box_pt1">
              <div class="b_title">业绩展示</div>
              <div class="more_daohang_sy">
                <div class="iconfont icon-youzhijiantou1"></div>
                <div class="">当前的位置 :</div>
                <div class="col_nav" @click="toHome">首页</div>
                <div class="icon">></div>
                <div class="col_nav_c">{{ positionText }}</div>
              </div>
            </div>
            <div class="box_pt2" v-show="!isDetail">
              <div class="hang_img_text_sy">
                <div
                  class="item"
                  v-for="(item, index) in gongchengList"
                  :key="index"
                  @click.stop="nativeTo(item, 'yeji')"
                >
                  <img
                    :src="httpp + item.thumbnail"
                    alt=""
                    class="zz_img"
                    v-if="item.thumbnail"
                  />
                  <p class="shengluehao zz_text" v-if="item">
                    {{ item.title }}
                  </p>
                </div>
              </div>
            </div>
            <div class="detail_content" v-if="isDetail">
              <div class="pt1_t">
                <div class="detail_title" v-if="detailInfo">
                  {{ detailInfo.title }}
                </div>
                <div class="msg_info">
                  <span class="jian">时间 : {{ detailInfo.time }}</span>
                  <span class="jian">来源 : {{ detailInfo.author }}</span>
                  <span class="jian">点击数 : {{ detailInfo.lookcount }}</span>
                </div>
              </div>
              <div
                class="pt2_content v_html_img"
                v-html="detailInfo.content"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="qiyejieshao" v-show="hezuoNavSel == 4">
        <div class="content_v1">
          <div class="box_title_sy w998">
            <div class="box_pt1">
              <div class="b_title">荣誉展示</div>
              <div class="more_daohang_sy">
                <div class="iconfont icon-youzhijiantou1"></div>
                <div class="">当前的位置 :</div>
                <div class="col_nav" @click="toHome">首页</div>
                <div class="icon">></div>
                <div class="col_nav_c">{{ positionText }}</div>
              </div>
            </div>
            <div class="box_pt2" v-show="!isDetail">
              <div class="hang_img_text_sy">
                <div
                  v-for="(item, index) in rongyuList"
                  :key="index"
                  @click.stop="nativeTo(item, 'rongyu')"
                >
                  <div class="item" v-if="item.thumbnail">
                    <img :src="httpp + item.thumbnail" alt="" class="zz_img" />
                    <p class="shengluehao zz_text" v-if="item">
                      {{ item.title }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="detail_content" v-if="isDetail">
              <div class="pt1_t">
                <div class="detail_title" v-if="detailInfo">
                  {{ detailInfo.title }}
                </div>
                <div class="msg_info">
                  <span class="jian">时间 : {{ detailInfo.time }}</span>
                  <span class="jian">来源 : {{ detailInfo.author }}</span>
                  <span class="jian">点击数 : {{ detailInfo.lookcount }}</span>
                </div>
              </div>
              <div
                class="pt2_content v_html_img"
                v-html="detailInfo.content"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="qiyejieshao" v-show="hezuoNavSel == 5">
        <div class="content_v1">
          <div class="box_title_sy w998">
            <div class="box_pt1">
              <div class="b_title">基本资料</div>
              <div class="more_daohang_sy">
                <div class="iconfont icon-youzhijiantou1"></div>
                <div class="">当前的位置 :</div>
                <div class="col_nav" @click="toHome">首页</div>
                <div class="icon">></div>
                <div class="col_nav_c">{{ positionText }}</div>
              </div>
            </div>
            <div class="box_pt2">
              <div class="box_title_self_sy">
                <div class="hezuo_lianxi" v-if="qiyeInfo">
                  <div class="p_h">
                    <div class="tit">所在地区：</div>
                    <div class="content_c" >{{ qiyeInfo.city }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">企业名称：</div>
                    <div class="content_c">{{ qiyeInfo.webtitle }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">法定代表人：</div>
                    <div class="content_c">{{ qiyeInfo.faren }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">法人企业代码：</div>
                    <div class="content_c">{{ qiyeInfo.companycode }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">注册时间：</div>
                    <div class="content_c">{{ qiyeInfo.time }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">联系人：</div>
                    <div class="content_c">{{ qiyeInfo.xianxianren }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">联系电话：</div>
                    <div class="content_c">{{ qiyeInfo.webdianhua }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">联系地址：</div>
                    <div class="content_c">{{ qiyeInfo.address }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">邮政编码：</div>
                    <div class="content_c">{{ qiyeInfo.youzbma }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">传真号码：</div>
                    <div class="content_c">{{ qiyeInfo.chuanzhen }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">单位网址：</div>
                    <div class="content_c">{{ qiyeInfo.email }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="qiyejieshao" v-show="hezuoNavSel == 6">
        <div class="content_v1">
          <div class="box_title_sy w998">
            <div class="box_pt1">
              <div class="b_title">联系我们</div>
              <div class="more_daohang_sy">
                <div class="iconfont icon-youzhijiantou1"></div>
                <div class="">当前的位置 :</div>
                <div class="col_nav" @click="toHome">首页</div>
                <div class="icon">></div>
                <div class="col_nav_c">{{ positionText }}</div>
              </div>
            </div>
            <div class="box_pt2">
              <div class="box_title_self_sy">
                <div class="hezuo_lianxi" v-if="qiyeInfo">
                  <div class="p_h">
                    <div class="tit">所在地区：</div>
                    <div class="content_c">{{ qiyeInfo.city }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">联系人：</div>
                    <div class="content_c">{{ qiyeInfo.xianxianren }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">联系电话：</div>
                    <div class="content_c">{{ qiyeInfo.webdianhua }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">邮政编码：</div>
                    <div class="content_c">{{ qiyeInfo.youzbma }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">传真号码：</div>
                    <div class="content_c">{{ qiyeInfo.chuanzhen }}</div>
                  </div>
                  <div class="p_h">
                    <div class="tit">联系地址：</div>
                    <div class="content_c">{{ qiyeInfo.address }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hezuo_footer">
      CopyRight 2008-2021. All Right Reserved 技术支持：海南建设信息网
    </div>
  </div>
</template>

<script>
import HezuoHome from "./hezuoHome";
import HezuoContent from "./hezuoContent";
export default {
  components: {
    HezuoHome,
    HezuoContent,
  },
  data() {
    return {
      hezuoNav: [
        { title: "网站首页", url: "", sel: 0 },
        { title: "企业介绍", url: "", sel: 0 },
        { title: "企业动态", url: "", sel: 0 },
        { title: "业绩展示", url: "", sel: 0 },
        { title: "荣誉展示", url: "", sel: 0 },
        { title: "基本资料", url: "", sel: 0 },
        { title: "联系我们", url: "", sel: 0 },
        { title: "企业登录", url: "", sel: 0 },
      ],
      hezuoNavSel: 0,
      qiyeInfo: {},
      qiyedongtaiList: [],
      rongyuList: [],
      gongchengList: [],
      userinfo: {},
      qiyeJeshao: "",
      httpp: "",
      isDetail: false,
      detailInfo: {},
      thisId: "",
      thisType: "",
    };
  },
  computed: {
    positionText() {
      return this.hezuoNav[this.hezuoNavSel].title;
    },
    isLogin() {
      return this.$store.state.isLogin;
    },
    rongyuListC() {
      return this.rongyuList.slice(0, 4);
    },
    gongchengListC() {
      return this.gongchengList.slice(0, 6);
    },
  },
  watch: {
    $route(to, from) {
      console.log(to);
      if (to.query.cid) {
        this.isDetail = true;
      } else {
        this.isDetail = false;
      }
      if (to.query.sel && to.query.cid) {
        this.hezuoNavSel = to.query.sel;
        this.$getApi("/Common/itemxaingqi", { id: to.query.cid }).then(
          (res) => {
            console.log(res.data);
            this.detailInfo = res.data;
          }
        );
      }
    },
  },
  beforeMount() {
    this.httpp = this.$httpp;
    console.log(this.$store.state);

    this.userinfo = this.$store.state.userInfo;
    // if (to.query.sel && to.query.cid ) {
    //     this.$getApi("/Common/itemxaingqi", { id: to.query.cid }).then((res) => {
    //       console.log(res.data);
    //       this.detailInfo = res.data;
    //     });
    //     this.isDetail = true;
    //   } else {
    //     this.isDetail = false;
    //   }
    if (this.$route.query.from == "home") {
      this.$getApi("/Common/qiyeyejizsxq", { id: this.$route.query.cid }).then(
        (res) => {
          console.log(res.data);
          this.detailInfo = res.data;
          this.isDetail = true;
        }
      );
    }
    if (this.$route.query.sel) {
      this.hezuoNavSel = this.$route.query.sel;
      this.thisId = this.$route.query.id;
    }
    if (this.$route.query.from == "mine") {
      if (!this.isLogin) {
        this.$router.push({ path: "/login" });
      }
    }
    let thisID = Number(this.$route.query.id);
    if (this.userinfo.id == thisID) {
      this.hezuoNav = [
        { title: "网站首页", url: "", sel: 0 },
        { title: "企业介绍", url: "", sel: 0 },
        { title: "企业动态", url: "", sel: 0 },
        { title: "业绩展示", url: "", sel: 0 },
        { title: "荣誉展示", url: "", sel: 0 },
        { title: "基本资料", url: "", sel: 0 },
        { title: "联系我们", url: "", sel: 0 },
        // { title: "内容预览", url: "", sel: 0 },
        { title: "后台管理", url: "", sel: 0 },
        { title: "退出登录", url: "", sel: 0 },
      ];
    } else {
      this.hezuoNav = [
        { title: "网站首页", url: "", sel: 0 },
        { title: "企业介绍", url: "", sel: 0 },
        { title: "企业动态", url: "", sel: 0 },
        { title: "业绩展示", url: "", sel: 0 },
        { title: "荣誉展示", url: "", sel: 0 },
        { title: "基本资料", url: "", sel: 0 },
        { title: "联系我们", url: "", sel: 0 },
        { title: "企业登录", url: "", sel: 0 },
      ];
    }
  },
  mounted() {
    //企业介绍
    this.$getApi("/common/itemqiyejs", { id: this.thisId, type: 2 }).then(
      (res) => {
        console.log(res.data, "企业介绍");
        this.qiyeJeshao = res.data ? res.data.content : "";
      }
    );
    //企业动态
    this.$getApi("/common/itemqiyedt", { id: this.thisId, type: 2 }).then(
      (res) => {
        console.log(res.data, "企业动态");
        this.qiyedongtaiList = res.data;
      }
    );
    //业绩展示
    this.$getApi("/common/itemqiyeyjzs", { id: this.thisId, type: 2 }).then(
      (res) => {
        console.log(res.data, "业绩展示");
        this.gongchengList = res.data;
      }
    );
    //荣誉展示
    this.$getApi("/common/itemqiyeryzs", { id: this.thisId, type: 2 }).then(
      (res) => {
        console.log(res.data, "荣誉展示");
        this.rongyuList = res.data;
      }
    );

    //基本资料
    this.$getApi("/common/itemqiyejbzl", { id: this.thisId, type: 2 }).then(
      (res) => {
        console.log(res.data, "基本资料");
        this.qiyeInfo = res.data;
      }
    );
  },
  methods: {
    turnToHome(){
      this.$router.push({path:"/"})
    },
    changeNav(index, item) {
      if (item) {
        console.log(item);
        if (item.title == "企业登录") {
          this.$router.push({ path: "/login" });
        }
        // if(item.title == "内容预览"){
        //   this.$router.push({ path: "/login" });
        // }else
        else if (item.title == "后台管理") {
          let addUrl =
            "uid=" + this.userinfo.token + "&type=" + this.userinfo.type;
          let this_ = this;
          // window.open("http://hongyingedu.top/cAdmin/#/Content1?" + addUrl);
          window.open(this_.httpp + "/cAdmin/#/Content1?" + addUrl);
        } else if (item.title == "退出登录") {
          this.$store.commit("loginOut");
          window.close();
        } else {
          this.hezuoNavSel = index;
          this.$router.push({
            path: "/hezuo",
            query: { sel: index, id: this.thisId, type: 2 },
          });
        }
      } else {
        this.hezuoNavSel = index;
        this.$router.push({
          path: "/hezuo",
          query: { sel: index, id: this.thisId, type: 2 },
        });
      }
    },
    toHome() {
      this.hezuoNavSel = 0;
    },
    nativeTo(item, type) {
      console.log(item);
      if (type == "dongtai") {
        this.$router.push({
          path: "/hezuo",
          query: { sel: 2, cid: item.id, id: this.thisId, type: 2 },
        });
      }
      if (type == "yeji") {
        this.$router.push({
          path: "/hezuo",
          query: { sel: 3, cid: item.id, id: this.thisId, type: 2 },
        });
      }
      if (type == "rongyu") {
        this.$router.push({
          path: "/hezuo",
          query: { sel: 4, cid: item.id, id: this.thisId, type: 2 },
        });
      }
      this.$getApi("/Common/itemxaingqi", { id: item.id }).then((res) => {
        console.log(res.data);
        this.detailInfo = res.data;
      });
    },
  },
};
</script>

<style scoped lang="stylus">
.hezuo_home_abso{
  cursor:pointer;
  position:fixed;
  left:50%;
  margin-left :-580px;
  top:20%;
  font-size 18px;
  line-height 18px;
  background-color #fff;
  color  #0066c8;
  border 1px solid #0066c8;
  border-radius 10px;
  padding 6px;
  opacity:.7;
  &:hover{
    opacity:1;
  }
}
.detail_content {
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 20px 26px;
}

.detail_content {
  .pt1_t {
    text-align: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;

    .detail_title {
      font-size: 22px;
      // font-weight bold
      // color:#333
    }

    .msg_info {
      padding: 20px 0 10px;
      color: #666;

      .jian {
        padding-right: 20px;
      }
    }
  }

  .pt2_content {
    .p_s, .p_suo {
      font-size: 16px;
      line-height: 30px;
    }
  }

  .pt3_ctrl {
    padding-top: 20px;
    display: flex;
    align-items: center;

    .funxiang {
      display: inline-flex;

      .te {
        padding-right: 10px;
      }
    }

    .save_btn {
      margin-left: 30px;
    }
  }

  .pt4_nav {
    padding: 10px 0 0px;
    border-top: 1px solid #ddd;
    margin-top: 10px;

    .nav_detail {
      display: flex;
      padding: 6px 0;
      align-items: center;

      .name_c {
        color: #f00;
      }

      .nav_to {
        cursor: pointer;
        margin-left: 10px;
        font-size: 15px;
      }
    }
  }
}

.hezuo {
  background: url('../../assets/img/hezuo/bj.jpg') repeat-x;

  .qiyejieshao {
    margin-top: 10px;
    min-height: calc(100vh - 465px);
  }

  .hezuo_body {
    width: 1015px;
    margin: 1px auto 0;
  }

  .hezuo_header {
    height: 114px;
    background: url('../../assets/img/hezuo/top_bj.png') repeat-x center center;

    .nei_cc {
      display: flex;
      width: 1015px;
      margin: 0 auto;
      align-items: center;
      justify-content: space-between;

      .h_title_bg {
        font-size: 36px;
        color: #0066c8;
      }
    }
  }

  .hezuo_nav {
    background-color: #0066c8;
    height: 37px;
    line-height: 37px;
    min-width: 1015px;

    .nei_cc {
      display: flex;
      width: 1015px;
      margin: 0 auto;
      align-items: center;

      .nav_li {
        width: 120px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        margin-right: 2px;
        cursor: pointer;

        &.active, &:hover {
          background-color: #004f98;
        }
      }
    }
  }

  .hezuo_footer {
    height: 53px;
    text-align: center;
    line-height: 53px;
    color: #fff;
    background-color: #0066c8;
    margin-top: 20px;
  }
}
</style>
